<!--
 * @Author: 黄达全
 * @Date: 2024-07-29 14:38:24
 * @LastEditTime: 2024-08-17 19:07:18
-->
<script lang="ts" setup>
import type { NoticeAddForm, NoticeVO } from "@/common/type"
import NoticeApi from "@/api/model/notice"
import drawer from "@/components/drawer.vue"
import { useTable } from "@/hooks/useTable"

const {
    height,
    pageSize,
    total,
    tableData,
    drawerRef,
    initForm,
    del,
    handleSelectionChange,
    editId,
    isAddMode,
    submitHandle,
    tableRef,
    tableHeight,
    formRules,
    getDataByPage
} = useTable<NoticeVO, NoticeAddForm>({
    fetchData: (page, pageSize) => NoticeApi.page(page, pageSize),
    addItem: (form) => NoticeApi.add(form),
    deleteItem: (ids) => NoticeApi.delete(ids),
    updateItem: (form) => NoticeApi.update(form),
    initForm: {
        title: "",
        content: "",
        order: 0
    },
    formRules: {
        title: [
            { required: true, message: "请输入公告标题", trigger: "blur" }
        ],
        content: [
            { required: true, message: "请输入公告内容", trigger: "blur" }
        ],
        order: [
            { required: true, message: "请输入公告排序", trigger: "blur" },
            { min: 1, message: "请输入大于0的数字", trigger: "blur" }
        ]
    },
    title: "公告"
})

// 打开公告新增抽屉
const openAddNoticeDrawer = () => {
    isAddMode.value = true
    initForm.title = ""
    initForm.content = ""
    initForm.order = 0
    drawerRef.value.open()
}
// 打开公告编辑抽屉
const openEditNoticeDrawer = (notice: NoticeVO) => {
    isAddMode.value = false
    initForm.title = notice.title
    initForm.content = notice.content
    initForm.order = notice.order
    editId.value = notice.id
    drawerRef.value.open()
}
</script>

<template>
    <div class="noticePage">
        <el-card class="card" :body-style="{ height: height + 'px', padding: '10px 10px 0 10px' }">
            <template #header>
                <div class="card-header">
                    <el-button color="var(--primary-theme-color)" icon="el-icon-plus" size="small" type="primary"
                        @click="openAddNoticeDrawer">新增公告</el-button>
                    <el-button size="small" type="danger" @click="del" icon="el-icon-delete">批量删除</el-button>
                </div>
            </template>
            <div class="card-body">
                <div class="notice-table" ref="tableRef">
                    <el-table :data="tableData" style="width:99.5%" stripe @selection-change="handleSelectionChange"
                        :height="tableHeight">
                        <el-table-column type="selection" width="80" align="center" />
                        <el-table-column prop="title" label="标题" width="250" align="center"  fixed="left"/>
                        <el-table-column show-overflow-tooltip prop="content" label="内容" align="center"  width="350"  />
                        <el-table-column prop="createTime" label="创建时间" width="200" align="center" />
                        <el-table-column prop="updateTime" label="修改时间" width="200" align="center" />
                        <el-table-column label="操作" align="center" width="200"  fixed="right">

                            <template #default="{ row }">
                                <el-button type="warning" size="small" @click="openEditNoticeDrawer(row)"
                                    icon="el-icon-edit">编辑</el-button>
                                <el-button type="danger" size="small" @click="del(row.id)"
                                    icon="el-icon-delete">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination">
                    <el-pagination size="small" background layout="prev, pager, next" :total="total"
                        :page-size="pageSize" @current-change="getDataByPage" />
                </div>
            </div>
        </el-card>
        <drawer ref="drawerRef" :title="isAddMode ? '新增公告' : '修改公告'" direction="rtl" size="35%" @submit="submitHandle">
            <template #rtl>
                <el-form :model="initForm" :rules="formRules" :label-width="100">
                    <el-form-item label="公告标题" prop="title">
                        <el-input v-model="initForm.title"></el-input>
                    </el-form-item>
                    <el-form-item label="公告内容" prop="content">
                        <el-input type="textarea" v-model="initForm.content" :rows="20"></el-input>
                    </el-form-item>
                    <el-form-item label="公告排序" prop="order">
                        <el-input-number v-model="initForm.order"></el-input-number>
                    </el-form-item>
                </el-form>
            </template>
        </drawer>
    </div>
</template>

<style lang="scss" scoped>
.noticePage {
    height: 100%;

    .card-body {
        height: 100%;
        display: flex;
        flex-direction: column;

        .notice-table {
            flex: 1;
            overflow-y: scroll;

            &::-webkit-scrollbar {
                width: 0;
            }
        }

        .pagination {
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

}

:deep(.el-pagination.is-background .el-pager li.is-active) {
    background-color: var(--primary-theme-color) !important;
    color: #FFFFFF;
}
</style>
